<template>
  <el-card class="box-card">
    <!-- 表格 -->
    <el-row style="float:right">
      <el-button
        type="primary"
        plain
        @click="addMenu"
      >创建菜单</el-button>
    </el-row>
    <el-table
      :data="list"
      border=""
      row-key="id"
    >
      <el-table-column
        label="菜单名称"
        prop="permission_name"
      />
      <el-table-column
        label="菜单地址"
        prop="route"
      />
      <el-table-column
        label="权限标识"
        prop="permission_mark"
      />
      <el-table-column label="图标" prop="icon" align="center">
        <template slot-scope="{ row }">
          <svg-icon :icon-class="row.icon" />
        </template>
      </el-table-column>
      <el-table-column
        label="组件路径"
        prop="component"
      />
      <el-table-column label="是否显示" prop="hidden" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.hidden"
            :active-value="1"
            :inactive-value="2"
            @change="changeShow(row.id,row.hidden)"
          />
          <!-- {{ row.hidden }} -->
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="updated_at"
      />
      <el-table-column
        fixed="right"
        label="操作"
        prop="description"
      >
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(row.id)"
          />
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-circle-plus-outline"
            circle
            @click="handleAdd(row.id)"
          />
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDel(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改  权限 -->
    <el-dialog
      title="菜单"
      :visible.sync="showDialog"
      width="50%"
      @close="btnCancel"
    >
      <!-- 公用表单 -->
      <form-menu ref="fromMenu" />
      <span slot="footer">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </span>
    </el-dialog>
    <!-- 添加  权限 -->
    <el-dialog
      title="菜单"
      :visible.sync="showAddDialog"
      width="50%"
      @close="addCancel"
    >
      <el-form>
        <el-form-item label="菜单类型" class="menuType">
          <el-radio-group v-model="radio1" size="mini">
            <el-radio-button label="菜单" />
            <el-radio-button label="按钮" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 公用表单 -->
      <form-menu v-if="radio1=='菜单'" ref="fromMenu" />
      <!-- 按钮表单 -->
      <el-form v-else ref="formBtnData" :model="formBtnData" label-width="80px" :inline="true" class="formBtnData">
        <el-form-item label="按钮名称" prop="permission_name" class="btnName">
          <el-input v-model="formBtnData.permission_name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="permission_mark">
          <el-input v-model="formBtnData.permission_mark" />
        </el-form-item>
        <el-form-item label="排序" prop="sort" class="btnSort">
          <el-input-number v-model.number="formBtnData.sort" :min="1" :max="10" label="1" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="addCancel">取消</el-button>
        <el-button size="small" type="primary" @click="addOk">确定</el-button>
      </span>
    </el-dialog>
    <!-- 添加菜单 -->
    <el-dialog
      title="菜单"
      :visible.sync="showAddMenu"
      width="50%"
      @close="addMenuCancel"
    >
      <!-- 公用表单 -->
      <form-menu v-if="showAddMenu" ref="fromMenu" />
      <span slot="footer">
        <el-button size="small" @click="addMenuCancel">取消</el-button>
        <el-button size="small" type="primary" @click="addMenuOk">确定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { getPermissionList, changePermissionById, getPermissionById, editPermissionById, delPermissionById, addPermissionList, addMenu } from '@/api/permissions'
import FormMenu from '../components/formMenu'
export default {
  name: 'Permissions',
  components: {
    FormMenu
  },
  data() {
    return {
      list: [], // 权限列表
      showDialog: false,
      showAddDialog: false,
      showAddMenu: false,
      activeName: 'second',
      radio1: '菜单',
      userId: '',
      formBtnData: {
        permission_name: '', // 名称
        permission_mark: '', // 权限标识
        sort: 1 // 排序
      }
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    addMenuCancel() {
      this.showAddMenu = false
    },
    async changeShow(id, val) {
      // console.log(val)
      await changePermissionById(id, val)
      this.$message.success('修改成功')
    },
    async addMenuOk() {
      await addMenu(this.$refs.fromMenu.formData)
      this.showAddMenu = false
      this.$message.success('添加成功')
      this.getPermissionList()
    },
    addMenu() {
      this.showAddMenu = true
    },
    async getPermissionList() {
      const { data } = await getPermissionList()
      // console.log(data)
      this.list = data
    },
    async handleEdit(id) {
      this.showDialog = true
      const { data } = await getPermissionById(id)
      this.$refs.fromMenu.formData = data
    },
    btnCancel() {
      this.showDialog = false
      this.$refs.fromMenu.formData = {
        // id: '', // id
        permission_name: '', // 名称
        route: '', // 菜单地址
        component: '', // 组件地址
        permission_mark: '', // 权限标识
        icon: '', // 图标
        redirect: '', // redirect
        keepalive: '', // keepalive
        hidden: '', // hidden
        islink: '', // islink
        sort: 1, // 排序
        parent_id: ''
      }
    },
    async btnOk() {
      await editPermissionById(this.$refs.fromMenu.formData)
      this.$message.success('操作成功')
      this.getPermissionList()
      this.showDialog = false
    },
    async handleAdd(id) {
      this.showAddDialog = true
      // this.form = row
      console.log(id)
      this.userId = id
    },
    async handleDel(id) {
      await this.$confirm('确定删除吗？').then(async() => {
        await delPermissionById(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getPermissionList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addCancel() {
      this.showAddDialog = false
      this.formBtnData = {
        permission_name: '', // 名称
        permission_mark: '', // 权限标识
        sort: 1 // 排序
      }
      this.$refs.fromMenu.formData = {
        // id: '', // id
        permission_name: '', // 名称
        route: '', // 菜单地址
        component: '', // 组件地址
        permission_mark: '', // 权限标识
        icon: '', // 图标
        redirect: '', // redirect
        keepalive: '', // keepalive
        hidden: '', // hidden
        islink: '', // islink
        sort: 1, // 排序
        parent_id: ''
      }
    },
    async addOk() {
      // console.log(1111)
      if (this.radio1 === '菜单') {
        console.log(111)
        await addPermissionList({ ...this.$refs.fromMenu.formData, parent_id: this.userId, type: 1, sort: 10 })
      } else {
        console.log(222)
        await addPermissionList({ ...this.formBtnData,
          sort: 10, type: 2, parent_id: this.userId, keepalive: 1, islink: 2, hidden: 1
        })
      }
      this.$message.success('添加成功')
      this.formBtnData = {
        permission_name: '', // 名称
        permission_mark: '', // 权限标识
        sort: 1 // 排序
      }
      this.getPermissionList()
      this.showAddDialog = false
    }
  }
}
</script>

<style scoped >
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.KeepAlive{
  margin-left: 40px;
}
.menuType{
  margin-left: 52px;
}
.formBtnData{
  margin-left: 39 px;
}
.btnName {
  margin-left: 39px;
}
.btnSort{
  margin-left: 35px;
}
::v-deep .el-dialog__header {
  background: #66b1ff;
  padding: 20px 20px 10px;
}
</style>
